import { useNavigation } from '@react-navigation/native'
import React from 'react'
import { View, Text, SafeAreaView, SectionList, StatusBar, StyleSheet, TouchableWithoutFeedback } from 'react-native'
import {WingBlank} from '@ant-design/react-native'
import { Avatar, Header } from '../../components'
import { pxToPt } from '../../utils'
import {useSelector} from 'react-redux'

export default function ProfileSettings() {

  const navigation = useNavigation()
  const user = useSelector(state=>state.user.currentUser)
  alert(JSON.stringify(user))
 return (
   <SafeAreaView>
     <WingBlank>
      <TouchableWithoutFeedback>
        <View style={styles.itemWrapper}>
          <Text style={styles.text}>头像</Text>
          <View style={styles.sonWrapper}>
            <Avatar style={styles.avatar}  />
            <Text style={styles.arrow}>&gt;</Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback>
        <View style={styles.itemWrapper}>
          <Text style={styles.text}>用户名</Text>
          <View style={styles.sonWrapper}>
            <Text>{user?.username}</Text>
            <Text style={styles.arrow}>&gt;</Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback>
        <View style={styles.itemWrapper}>
          <Text style={styles.text}>性别</Text>
          <View style={styles.sonWrapper}>
            <Text>{user?.gender|| '女'}</Text>
            <Text style={styles.arrow}>&gt;</Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback>
        <View style={styles.itemWrapper}>
          <Text style={styles.text}>电话</Text>
          <View style={styles.sonWrapper}>
            <Text>{user.mobile}</Text>
            <Text style={styles.arrow}>&gt;</Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback>
        <View style={styles.itemWrapper}>
          <Text style={styles.text}>邮箱</Text>
          <View style={styles.sonWrapper}>
          <Text>{user.email}</Text>
            <Text style={styles.arrow}>&gt;</Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback>
        <View style={styles.itemWrapper}>
          <Text style={styles.text}>铭言</Text>
          <View style={styles.sonWrapper}>
            <Text>{user.motto}</Text>
            <Text style={styles.arrow}>&gt;</Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
     </WingBlank>
     
   </SafeAreaView>
 )
  
}

const styles = StyleSheet.create({
  itemWrapper: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: pxToPt(10),
    marginTop:pxToPt(10)
  },
  sonWrapper: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  avatar: {
    height: pxToPt(40),
    width: pxToPt(40),
  },
  arrow: {
    marginLeft: pxToPt(10)

  },
  text:{
    fontSize: pxToPt(15),
    fontWeight: '500'
  }
})
